<template>
  <div class="show_table">
    <el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <template v-for="item in table_header">
        <el-table-column
          v-if="item.type == '_index'"
          :key="item.id"
          type="index"
          label="序号"
          width="55"
          align="center"
        />
        <el-table-column
          v-if="item.type == '_common'"
          :key="item.id"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          align="center"
        />
        <el-table-column
          v-if="item.type == '_status'"
          :key="item.id"
          align="center"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row._statusNum == '0'
                  ? 'success'
                  : scope.row._statusNum == '1'
                  ? 'info'
                  : 'warning'
              "
            >
              {{ scope.row._statusMsg }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.type == '_operate'"
          :key="item.id"
          align="center"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <el-button
              v-for="temp in item.operation"
              :key="temp.btn_id"
              :size="temp.btn_size"
              :type="
                temp.btn_type == '编辑'
                  ? 'primary'
                  : temp.btn_type == '详情'
                  ? 'primary'
                  : temp.btn_type == '删除'
                  ? 'danger'
                  : 'success'
              "
              plain
              @click="
                temp.btn_type == '编辑'
                  ? handleEdit(scope.row)
                  : temp.btn_type == '详情'
                  ? handleDetail(scope.row)
                  : temp.btn_type == '删除'
                  ? handleDel(scope.row)
                  : handleOther(scope.row)
              "
              >{{ temp.btn_type }}</el-button
            >
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /**
        表头必须字段：1、id-->v-for渲染key值；2、label-->标题名称；3、type-->表格列类型（_common:常规渲染，_status：状态渲染，被渲染成Tag类型
          要对表格中想被渲染成状态的字段做处理成：_statusNum:0|1|2,_statusMsg:'值1'|值2|值3；_operate-->操作列
          4、prop-->对应表格数据的字段, 5、operation-->操作栏数组，里面对象字段（btn_id,btn_type,btn_size）

          组件内部内置了handleEdit、handleDetail、handleDel、handleOther函数，点击触发父级的对应函数，并把当前行id传出去
        ）；
      */
      table_header: []
    };
  },
  props: {
    tableHeader: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    tableHeader: {
      handler(nval) {
        this.table_header = nval;
      },
      immediate: true
    }
  },
  methods: {
    handleEdit(row) {
      this.$parent.handleEdit(row.id);
    },
    handleDetail(row) {
      this.$parent.handleDetail(row.id);
    },
    handleDel(row) {
      this.$parent.handleDel(row.id);
    },
    handleOther(row) {
      this.$parent.handleOther(row.id);
    }
  }
};
</script>

<style scoped>
.show_table {
  box-sizing: border-box;
  padding: 0 20px;
}
</style>
